<template>
    <div class="map-content">
        <BasinChange />

        <div class="Player_video">
            <div ref="video" id="player" style="width:100%;height:960px"></div>
        </div>
        <RightBtnGroup />


        <div class="float-warp" :style="{ right: floatRight }">
            <LegendFrame
                v-if="$route.path === '/Rehearsal' && (pageState.yuYanIsCreat_SCJY || pageState.yuYanInfoType === 'FXPG' || pageState.goToYuyan === true)">
                <LegendRiskAssessment v-if="pageState.yuYanInfoType === 'FXPG' || pageState.goToYuyan === true" />
                <LegendRainMeasured v-if="pageState.yuYanIsCreat_SCJY" />
                <LegendYJLJ v-if="pageState.yuYanIsCreat_SCJY" />
            </LegendFrame>
        </div>
        <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'SectionWaterLevel'" mask class="MeasuredDlgStyle01">
            <template v-slot:title> 断面水位 </template>
            <template v-slot:body>
                <SectionWaterLevel />
            </template>
        </Dlgdiv>
        <Dlgdivv v-if="this.$store.getters.dlgParams.name == '防治村村庄详情'" :title="false" mask class="DlgStyle1">
            <template v-slot:title>详情</template>
            <template v-slot:body>
                <Dlgyyfxd :listStyleobj="ListStyleobj" :tablist="[]" />
            </template>
        </Dlgdivv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '历史洪痕'" mask class="MeasuredDlgStyle">
            <template v-slot:title> 历史洪痕点 </template>
            <template v-slot:body>
                <FloodMark />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '桥涵'" mask class="MeasuredDlgStyleShort">
            <template v-slot:title> {{ $store.getters.dlgParams.remarks.NAME }} </template>
            <template v-slot:body>
                <LayerDetailsQLYHDC />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '塘堰坝'" mask class="MeasuredDlgStyleShort">
            <!-- <template v-slot:title> 塘堰坝 </template> -->
            <template v-slot:title> {{ $store.getters.dlgParams.remarks.NAME }} </template>
            <template v-slot:body>
                <LayerDetailsTYB />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '跨沟道路'" mask class="MeasuredDlgStyleShort">
            <template v-slot:title> 跨沟道路 </template>
            <!-- <template v-slot:title> {{ $store.getters.dlgParams.remarks.NAME }} </template> -->
            <template v-slot:body>
                <LayerDetailsKGDL />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '面状沟滩占地'" mask class="MeasuredDlgStyleShort">
            <template v-slot:title> 面状沟滩占地 </template>
            <template v-slot:body>
                <LayerDetailsMZGTZD />
            </template>
        </Dlgdiv>

        <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'WarningDigInfo'" mask class="MeasuredDlgStyle">
            <template v-slot:title> 详情 </template>
            <template v-slot:body>
                <WarningDig />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'WarningHdDigInfo'" mask class="MeasuredDlgStyle">
            <template v-slot:title> 详情 </template>
            <template v-slot:body>
                <warningHdDig />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '防洪特征值'" mask class="MeasuredDlgStyleShort2">
            <template v-slot:title> 防洪特征值 </template>
            <template v-slot:body>
                <LayerDetailsFHTZZ />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '洪水频率图'" mask class="MeasuredDlgStyleShort2">
            <template v-slot:title> 洪水频率图 </template>
            <template v-slot:body>
                <LayerDetailsHSPLT />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '设计洪水特征值'" mask class="MeasuredDlgStyleShort3">
            <template v-slot:title> 设计洪水特征值 </template>
            <template v-slot:body>
                <LayerDetailsSJHSTZZ />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '风险隐患保护对象'" mask class="MeasuredDlgStyleShort4">
            <template v-slot:title> 风险隐患保护对象 </template>
            <template v-slot:body>
                <LayerDetailsFXYHBHDX />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '外洪顶托调查分析成果'" mask class="MeasuredDlgStyleShort4">
            <template v-slot:title> 外洪顶托调查分析成果 </template>
            <template v-slot:body>
                <LayerDetailsWHDTDCFXJG />
            </template>
        </Dlgdiv>

    </div>
</template>

<script>
import Vue from 'vue'
import BasinChange from '@/map/cesium/BasinChange'
import RightBtnGroup from '@/map/cesium/RightBtnGroup'
import Player from '@/map/cesium/Player'

import LegendFrame from '@/map/cesium/legend/LegendFrame'
import LegendRainMeasured from '@/map/cesium/legend/LegendRainMeasured'
import LegendLadar from '@/map/cesium/legend/LegendLadar'
import LegendLadarFSL from '@/map/cesium/legend/LegendLadarFSL'
import LegendYbHsfxRate from '@/map/cesium/legend/LegendYbHsfxRate'
import LegendYbHsfxFlow from '@/map/cesium/legend/LegendYbHsfxFlow'
import LegendYYYMFW from '@/map/cesium/legend/LegendYYYMFW'
import LegendYYFXD from '@/map/cesium/legend/LegendYYFXD'
import LegendRainPrediction from '@/map/cesium/legend/LegendRainPrediction'
import LegendYJQXZQ from '@/map/cesium/legend/LegendYJQXZQ'
import LegendFXFW from '@/map/cesium/legend/LegendFXFW'
import LegendYJLJ from '@/map/cesium/legend/LegendYJLJ'
import LegendYJJC from '@/map/cesium/legend/LegendYJJC'
import LegendHD from '@/map/cesium/legend/LegendHD'
import LegendRiskAssessment from '@/map/cesium/legend/LegendRiskAssessment'

import PopCommon from '@/map/cesium/pop/PopCommon'
import PopHD from '@/map/cesium/pop/PopHD'
import PopYJCZ from '@/map/cesium/pop/PopYJCZ'
import PopYJHD from '@/map/cesium/pop/PopYJHD'
import PopCZYA from '@/map/cesium/pop/PopCZYA'
import camera from '@/map/cesium/mixins/camera'
import PositionInfo from '@/map/cesium/PositionInfo'

import mapLoading from '@/map/cesium/mapLoading'
import mapLoadingStep from '@/map/cesium/mapLoadingStep'
import rainMeasured from '@/map/cesium/mixins/rainMeasured'
import ladarMesh from '@/map/cesium/mixins/ladarMesh'
import HS_YMFW from '@/map/cesium/mixins/HS_YMFW'
import ybFengXianDian from '@/map/cesium/mixins/ybFengXianDian'
import maxYanMoFanWei from '@/map/cesium/mixins/maxYanMoFanWei'
import fengXianDian from '@/map/cesium/mixins/fengXianDian'
import YY_YJ_LJ from '@/map/cesium/mixins/YY_YJ_LJ'

import SectionWaterLevel from '@/views/components/SectionWaterLevel.vue'
import WarningDig from '@/views/components/warningDig.vue'
import warningHdDig from '@/views/components/warningHdDig.vue'
import FloodMark from '@/views/components/FloodMark.vue'
import LayerDetailsQLYHDC from '@/views/components/LayerDetailsQLYHDC.vue'
import LayerDetailsTYB from '@/views/components/LayerDetailsTYB.vue'
import LayerDetailsKGDL from '@/views/components/LayerDetailsKGDL.vue'
import LayerDetailsMZGTZD from '@/views/components/LayerDetailsMZGTZD.vue'
import LayerDetailsFHTZZ from '@/views/components/LayerDetailsFHTZZ.vue'
import LayerDetailsHSPLT from '@/views/components/LayerDetailsHSPLT.vue'
import LayerDetailsSJHSTZZ from '@/views/components/LayerDetailsSJHSTZZ.vue'
import LayerDetailsFXYHBHDX from '@/views/components/LayerDetailsFXYHBHDX.vue'
import LayerDetailsWHDTDCFXJG from '@/views/components/LayerDetailsWHDTDCFXJG.vue'


import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
import { getCookie, setCookie } from '@/PixelStreaming/webRtcPlayer.js'

export default {
    name: 'WebRtcPlayer',
    mixins: [
        camera,
        rainMeasured,
        ladarMesh,
        HS_YMFW,
        ybFengXianDian,
        maxYanMoFanWei,
        fengXianDian,
        YY_YJ_LJ
    ],
    data() {
        return {
            bgFull: true,
            floatRight: '450px',
            ListStyleobj: {
                'stTime': this.$moment().format('YYYY-MM-DD 08:00'),
                'enTime': this.$moment().format('YYYY-MM-DD HH:mm')
            },
            rehearsalID: '',//方案id
        }
    },
    components: {
        LegendFrame,
        mapLoading,
        mapLoadingStep,
        PositionInfo,
        BasinChange,
        RightBtnGroup,
        Player,
        LegendRainMeasured,
        LegendLadar,
        LegendLadarFSL,
        LegendYbHsfxRate,
        LegendYbHsfxFlow,
        LegendYYYMFW,
        LegendYYFXD,
        LegendRainPrediction,
        LegendYJQXZQ,
        LegendFXFW,
        LegendYJLJ,
        LegendYJJC,
        LegendHD,
        LegendRiskAssessment,
        PopCommon,
        PopHD,
        PopYJCZ,
        PopYJHD,
        PopCZYA,

        SectionWaterLevel,
        WarningDig,
        warningHdDig,
        FloodMark,
        LayerDetailsQLYHDC,
        LayerDetailsTYB,
        LayerDetailsMZGTZD,
        LayerDetailsFHTZZ,
        LayerDetailsHSPLT,
        LayerDetailsSJHSTZZ,
        LayerDetailsKGDL,
        LayerDetailsFXYHBHDX,
        LayerDetailsWHDTDCFXJG,

    },
    computed: {
        mapLoadingText() {
            return this.$store.getters.mapLoadingText
        },
        rightFold() {
            return this.$store.getters.rightFold
        },
        pageState() {
            return this.$store.getters.pageState
        },
        SceneMode() {
            return this.$store.getters.SceneMode
        },
        Isyuyanyagl() {
            return this.$store.getters.Isyuyanyagl
        },

    },
    watch: {
        // rightFold 右边是否展开
        rightFold: {
            immediate: true,
            handler: function (val, oldVal) {
                this.floatRight = val ? '1%' : 'calc(22.5% - 40px)';//'19.5%'
            }
        },

        $route: {
            handler: function (val, oldVal) {
                // console.log(val)
            },
            // 深度观察监听
            deep: true
        },
        pageState: {
            immediate: true,
            deep: true,
            handler: function (val, oldVal) {
                if (this.$route.path === '/Rehearsal') {
                    this.rehearsalID = val.planId;
                }
                if (this.$route.path === '/reserveplan/visualization') {
                    this.rehearsalID = val.planId;
                }
            }
        }
    },
    created() {
        this.initLoad();
    },
    mounted() {
        var _this = this;
        window.addEventListener('resize', function () {
            var width = document.body.clientWidth;
            var height = document.body.clientHeight;
            var param = {
                "previewCode": width + 'x' + height// 分辨率
            }
            callUIInteraction("Web_Resolution", param);
        });
        window.UE_InitEvent = function (res) {
            var PointType = res.PointType;
            var params = (JSON.parse(res.params)).properties;
            console.log(PointType);
            console.log(params);
            switch (PointType) {
                case "FZC":
                    var dlgParams = _this.$store.getters.dlgParams
                    dlgParams.name = '防治村村庄详情'
                    dlgParams.params = {
                        'Ewcode': params.ADCD,
                    }
                    _this.$store.dispatch('dlgParams', dlgParams)
                    break;
                case "LSHH":
                    var dlgParams = _this.$store.getters.dlgParams
                    dlgParams.name = '历史洪痕'
                    dlgParams.remarks = params
                    _this.$store.dispatch('dlgParams', dlgParams)
                    break;
                case "QLYHDC":
                    var dlgParams = _this.$store.getters.dlgParams
                    dlgParams.name = '桥涵'
                    dlgParams.remarks = params
                    _this.$store.dispatch('dlgParams', dlgParams)
                    break;
                case "TYB":
                    var dlgParams = _this.$store.getters.dlgParams
                    dlgParams.name = '塘堰坝'
                    dlgParams.remarks = params
                    _this.$store.dispatch('dlgParams', dlgParams)
                    break;
                case "MZGTZD":
                    var dlgParams = _this.$store.getters.dlgParams
                    dlgParams.name = '面状沟滩占地'
                    dlgParams.remarks = params
                    _this.$store.dispatch('dlgParams', dlgParams)
                    break;
                case "DMX":
                    if (_this.rehearsalID) {
                        var dlgParams = _this.$store.getters.dlgParams
                        dlgParams.name = 'SectionWaterLevel'
                        dlgParams.params = {
                            rehearsalID: _this.rehearsalID, // 方案id
                            id: _this.basin, // 流域编码
                            sectionName: params.NAME || params.Name // 断面名称
                        }
                        _this.$store.dispatch('dlgParams', dlgParams)
                    }
                    break;
                default:
                    break;
            }

        }
    },
    methods: {
        initLoad() {
            var _this = this;
            _this.serverUrl = process.env.VUE_APP_UE;
            _this.uuid = this.guid();
            var videoInstance = initLoad({
                serverUrl: _this.serverUrl,
                uuid: _this.uuid
            })

        },
        guid() {
            let uuid = getCookie('uuid')
            if (uuid && uuid != 'null') {
                return uuid;
            }
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }

            uuid = (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            setCookie('uuid', uuid, 6000);
            return uuid;
        },
    },
    beforeDestroy() {
        clearInterval()
    },
}
</script>
<style lang="scss" scoped>
.MeasuredDlgStyle {
    width: 70% !important;
    //height: 80% !important;
    // height: 80% !important;
    // max-height: 700px;
    left: 15%;
    top: 5%
}
.MeasuredDlgStyle01 {
    width: 70% !important;
    //height: 80% !important;
    // height: 80% !important;
    // max-height: 700px;
    left: 15%;
    top: 10%
}

.MeasuredDlgStyleShort {
    width: 70% !important;
    left: 15%;
    top: 15%
}

.MeasuredDlgStyleShort2 {
    width: 70% !important;
    left: 15%;
    top: 26%
}

.MeasuredDlgStyleShort3 {
    width: 70% !important;
    left: 15%;
    top: 15%
}

.MeasuredDlgStyleShort4 {
    width: 70% !important;
    height: 700px !important;
    left: 15%;
    top: 10%
}

.DlgStyle1 {
    width: 70% !important;
    height: 700px !important;
    left: 15%;
    top: 8%
}

.section-box {
    width: 100%;
    height: 100%;
}

.top_llfxChart {
    height: 300px;
    margin-bottom: 10px;
}

.tableBox {
    height: calc(100% - 320px);

    .collapse_div {
        height: calc(100% - 20px);
        overflow: auto;
    }
}

.tab {
    width: 100%;
    margin-left: 0px;
    justify-content: space-between;
}

.tab .tabTit {
    padding: 0;
    width: 32%;
    margin: 0px;
    box-sizing: border-box;
}

.Player_video {
    width: 100%;
    position: fixed;
    top: 0;
}
</style>